<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Carousel</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
        }
        .carousel-container {
            perspective: 1000px;
            width: 600px;
            height: 400px;
        }
        .carousel {
            transform-style: preserve-3d;
            position: relative;
            animation: rotate 20s infinite linear;
        }
        .slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.8;
            transition: transform 0.5s, opacity 0.5s;
        }
        @keyframes rotate {
            from {
                transform: rotateY(0deg);
            }
            to {
                transform: rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="carousel-container">
        <div class="carousel">
            <img src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024" alt="Image 1" class="slide" style="transform: rotateY(0deg) translateZ(600px)">
            <img src="http://pic1.arkoo.com/56D0B40F99F841DF8A2425762AE2565D/picture/o_1i4qoovi8rn8ras12sn63lgpo1im.jpg" alt="Image 2" class="slide" style="transform: rotateY(72deg) translateZ(600px)">
            <img src="https://pic.rmb.bdstatic.com/bjh/news/6792ab1e35c6a2a6cd10a5990bd033d0.png" alt="Image 3" class="slide" style="transform: rotateY(144deg) translateZ(600px)">
            <img src="https://pic4.zhimg.com/v2-4d9e9f936b9968f53be22b594aafa74f_r.jpg" alt="Image 4" class="slide" style="transform: rotateY(216deg) translateZ(600px)">
            <img src="https://oss.cloudhubei.com.cn/cms/release/set35/20241014/9ec7a083198223c49c06e3ebbf8df33c.jpg" alt="Image 5" class="slide" style="transform: rotateY(288deg) translateZ(600px)">
        </div>
    </div>
</body>
</html>